<template>
  <a-card>
    <!--  :expand="true" -->
    <v-table
      ref="tableRef"
      :apiFn="tablePage"
      :apiParam="{ current: 1, size: 10, range: undefined }"
      :form="form"
      :formParam="formParam"
      :columns="columns"
      :toolConfig="{
        setting: true,
      }"
    >
      <!-- form -->
      <template #customize="{ title, key }">
        <a-input
          style="width: 100%"
          v-model:value="formParam[key]"
          :placeholder="`请输入${title}`"
          allow-clear
        />
      </template>
      <!-- 中间层 -->
      <!-- <template #info></template> -->
      <!-- table -->
      <template #default="{ column, record }">
        <template v-if="column.dataIndex === 'image'">
          <a-image :width="50" :src="record[column.dataIndex]"></a-image>
        </template>
        <template v-if="column.dataIndex === 'operate'">
          <a type="link">编辑</a>
          <a-popconfirm title="确认删除此项吗？" @confirm="onDelete(record.id)">
            <a-button type="link" danger> 删除 </a-button>
          </a-popconfirm>
        </template>
      </template>
    </v-table>
  </a-card>
</template>

<script setup>
import { ref } from "vue";
import { message } from "ant-design-vue";
import { form, columns, formItemLayout } from "./config/page";
import { tablePage, tableDelete } from "@/api";

// ref
const tableRef = ref(null);
const formParam = ref({});

const onDelete = async (id) => {
  await tableDelete({ id });
  message.success("删除成功");
  refresh();
};

const refresh = () => {
  tableRef.value.refresh();
};
</script>

<style scoped>
.but {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
</style>
